<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Items in your shopping cart</title>
<link rel="StyleSheet" type="text/css"
	href="<%=request.getContextPath()%>/pages/css/common.css"></link>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/pages/js/jquery-1.5.js"></script>
<script type="text/javascript">	
	function removeFromCart(productId){
		jQuery.ajax({
			  url: "<%=request.getContextPath()%>/removeFromCart?id="
					+ productId,
			success : function(data) {
				jQuery('#tr_' + productId).remove();
				alert(data);
			}
		});
	}
	
	function updateCart(productId){
		cnt = document.getElementById("count_" + productId).value;
		jQuery.ajax({
			  url: "<%=request.getContextPath()%>/updateCart?id=" + productId + "&count=" + cnt,
			success : function(data) {
				alert("Updated successfully");
			}
		});
	}
</script>

<style type="text/css">
table.sample {
	border-width: 1px;
	border-spacing: 2px;
	border-style: none;
	border-color: white;
	border-collapse: collapse;
	background-color: white;
}
table.sample th {
	border-width: 1px;
	padding: 2px;
	border-style: inset;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
}
table.sample td {
	border-width: 1px;
	padding: 2px;
	border-style: inset;
	border-color: gray;
	background-color: white;
	-moz-border-radius: ;
}
</style>

</head>

<body style="background-image: none;">
	<%@ include file="../common/taglibs.jsp"%>

	<div>
		<table class="sample" style="width: 780px;">
			<thead style="background-image: url('pages/images/sliced/20.jpg'); background-repeat: no-repeat;">
				<tr>
					<td colspan="4" style="color: #EE2C2C; font-size: 14pt; text-align: left; width: 780px; height: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;VIWE MY CART</td>
				</tr>
			<tbody>
					<tr>
						<td>Product name</td>
						<td>Product image</td>
						<td>Count</td>
						<td>Action</td>
					</tr>
					<s:iterator var="cartItem" value="products">
						<tr id="tr_<s:property value="#cartItem.product.id"/>">
							<td valign="middle"><s:property value="#cartItem.product.name" /></td>
							<td>
							<img alt=""
								src="uploadImages/<s:property value="#cartItem.product.prdImageUrl1"/>" height="120"
								width="120" />
							</td>
							<td width="10%">
								<input type="text" id="count_<s:property value="#cartItem.product.id"/>" value="<s:property value="#cartItem.count"/>" style="width: 40px;"/>
							</td>
							<td>
								<button onclick="removeFromCart('<s:property value="#cartItem.product.id"/>');">Remove item</button>
								<button onclick="updateCart('<s:property value="#cartItem.product.id"/>');">Update cart</button>
							</td>
						</tr>
					</s:iterator>
			</tbody>
		</table>
		<div align="right" style="padding-right: 20px; padding-top: 20px;">
			<button onclick="window.location.href='<%=request.getContextPath()%>/flightDetails'">Continue with checkout</button>
		</div>
	</div>
</body>
</html>
